<template>
  <div class="container page">
    <div class="header">
      <van-nav-bar
          left-arrow
          @click-left="$router.back()"
      />
    </div>
    <div id="example-video-div">
      <video id="playerId" class="video-js" style="width: 100%; height: 100%"></video>
    </div>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import videoJS from "video.js";
import {Toast} from "vant";

export default {
  name: "LiveVideo",
  data: function () {
    return {
      loading: true,
      player: undefined
    };
  },
  created() {
    if (!this.$route.query.url) {
      let that = this;
      Toast.fail({
        message: "访问此页面异常",
        forbidClick: true,
        duration: 3000,
        onClose: function () {
          that.$router.back();
        }
      })
      return;
    }
    let that = this;
    this.$nextTick(function () {
      that.player = videoJS("playerId", {
        autoplay: "any",
        controls: true,
        controlBar: true,
        preload: true
      });
      that.player.src("https://change.xxynhotpd.tv:4354/" + that.$route.query.url);
    })
  },
  destroyed() {
    this.player.dispose()
  },
  methods: {
    play() {
      this.player.play();
    }
  }
};
</script>
<style scoped>
:root {
  --van-nav-bar-icon-color: #fa59b5;
  --van-nav-bar-title-text-color: #fa59b5;
  --van-nav-bar-text-color: var(--baseColor-black-1);
  --van-field-input-disabled-text-color: #fa59b5;
  --van-dialog-background-color: var(--baseColor-pink-2);
  --van-dialog-confirm-button-text-color: var(--baseColor-red-1);
  --van-dialog-has-title-message-text-color: var(--baseColor-black-1);
  --van-button-default-background-color: var(--baseColor-white-1);
  --van-collapse-item-content-background-color: var(--baseColor-black-6);
  --van-collapse-item-content-text-color: var(--baseColor-gray-4);
  --van-tab-text-color: var(--baseColor-gray-4);
  --van-tab-active-text-color: var(--baseColor-white-1);
  --van-tabs-bottom-bar-color: var(--baseColor-blue-2);
  --van-tabs-nav-background-color: var(--baseColor-black-2);
  --van-border-color: var(--baseColor-gray-2);
  --van-image-placeholder-background-color: var(--baseColor-gray-1);
  --van-popover-dark-background-color: var(--baseColor-white-1);
  --van-popover-dark-text-color: var(--baseColor-black-2);
  --van-popover-light-background-color: var(--baseColor-white-1);
  --van-field-label-color: var(--baseColor-pink-1);
  --van-field-input-text-color: var(--baseColor-pink-1);
  --van-field-placeholder-text-color: var(--baseColor-gray-4);
  --van-field-disabled-text-color: var(--baseColor-pink-1);
  --van-cell-background-color: var(--baseColor-white-1);
  --van-picker-background-color: var(--baseColor-pink-2);
  --van-picker-option-text-color: var(--baseColor-pink-1);
  --van-picker-confirm-action-color: var(--baseColor-black-1);
  --van-picker-cancel-action-color: var(--baseColor-pink-1);
  --van-picker-loading-mask-color: rgba(var(--baseColor-white-1), 0.9);
  --van-popup-background-color: var(--baseColor-pink-2);
  --van-uploader-icon-color: var(--baseColor-gray-3);
  --van-uploader-text-color: var(--baseColor-gray-4);
  --van-uploader-upload-background-color: var(--baseColor-gray-1);
  --van-password-input-background-color: var(--baseColor-white-1);
  --van-password-input-cursor-color: var(--baseColor-black-2);
  --van-password-input-dot-color: var(--baseColor-black-1);
  --van-number-keyboard-background-color: var(--baseColor-pink-1);
  --van-number-keyboard-key-active-color: var(--baseColor-gray-2);
  --van-number-keyboard-title-color: var(--baseColor-gray-5);
  --van-number-keyboard-button-background-color: var(--baseColor-blue-1);
  --van-number-keyboard-button-text-color: var(--baseColor-white-1);
  --van-radio-label-color: var(--baseColor-yellow-2);
  --van-radio-border-color: var(--baseColor-gray-3);
  --van-badge-color: var(--baseColor-white-1);
  --van-badge-background-color: var(--baseColor-red-1);
  --van-badge-dot-color: var(--baseColor-red-1);
  --van-slider-active-background-color: var(--baseColor-blue-1);
  --van-slider-inactive-background-color: var(--baseColor-gray-2);
  --van-search-background-color: var(--baseColor-transparent);
  --van-search-content-background-color: var(--baseColor-pink-2);
  --van-search-left-icon-color: var(--baseColor-gray-4);
  --van-search-label-color: var(--baseColor-gray-3);
  --van-checkbox-checked-icon-color: var(--baseColor-blue-1);
  --van-checkbox-disabled-background-color: var(--baseColor-gray-3);
  --van-index-anchor-text-color: var(--baseColor-black-1);
  --van-index-anchor-background-color: transparent;
  --van-index-anchor-sticky-text-color: var(--baseColor-black-1);
  --van-index-anchor-sticky-background-color: var(--baseColor-white-1)
}

::v-deep .van-icon {
  color: var(--van-nav-bar-icon-color);
}

.container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%
}

.container .header {
  position: fixed;
  top: 0;
  z-index: 1000
}

.container .header .nav {
  background: transparent
}

.container #example-video-div {
  width: 100%;
  height: 100%
}

</style>
